import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/ClickEvent-Ref',
    name: 'ClickEvent-Ref',
    component: () => import('../views/ClickEvent-Ref.vue')
  },
  {
    path: '/ClickEvent-Reactive',
    name: 'ClickEvent-Reactive',
    component: () => import('../views/ClickEvent-Reactive.vue')
  },
  {
    path: '/LifeCycle',
    name: 'LifeCycle',
    component: () => import('../views/LifeCycle.vue')
  },
  {
    path: '/Watch',
    name: 'Watch',
    component: () => import('../views/Watch.vue')
  },
  {
    path: '/Computed',
    name: 'Computed',
    component: () => import('../views/Computed.vue')
  },
  {
    path: '/NowTime',
    name: 'NowTime',
    component: () => import('../views/NowTime.vue')
  },
  {
    path: '/Teleport',
    name: 'Teleport',
    component: () => import('../views/Teleport.vue')
  },
  {
    path: '/Async',
    name: 'Async',
    component: () => import('../views/Async.vue')
  },
  {
    path: '/ComponentPractice',
    name: 'ComponentPractice',
    component: () => import('../views/ComponentPractice.vue')
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;
